<template>
  <div>
    <div style="padding: 24px; background-color: #ffffff">
      <a-row>
        <a-col :span="8">
          <a-row
            type="flex"
            justify="center"
            align="middle">
            <a-col :span="6">
              <img src="@/assets/img/batch1.png" style="width: 64px">
            </a-col>
            <a-col :span="18">
              <div>请按照模版填写发货信息，运单号勿使用科学计数法</div>
              <div><a>下载模板</a> <a>下载物流公司编码</a></div>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="8">
          <a-row
            type="flex"
            justify="center"
            align="middle">
            <a-col :span="6">
              <img src="@/assets/img/batch2.png" style="width: 64px">
            </a-col>
            <a-col :span="18">
              <div>单次最多导入5000条订单，超过分批导入，支持csv、xls、xlsx格式文件</div>
              <div><a href="https://school.jinritemai.com/doudian/web/article/101766?from=shop_article" target="_blank">查看教程</a>
              </div>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="8">
          <a-row
            type="flex"
            justify="center"
            align="middle">
            <a-col :span="6">
              <img src="@/assets/img/batch2.png" style="width: 64px">
            </a-col>
            <a-col :span="18">
              <div>已发货订单仅允许覆盖1次，请谨慎修改</div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div style="padding: 24px; background-color: #ffffff; margin-top: 16px">
      <div style="background-color: #FAFAFF;padding: 4px">
        <a-icon type="info-circle"/>
        请确认实际发货时填写的手机号与平台收货人电话保持一致，否则可能会判定为虚假发货
      </div>
      <div style="margin: 24px 0;font-size: 16px;color: #000000">上传文件</div>
      <div>
        <div
          style="position: relative;display: inline-flex;align-items: center;box-sizing: border-box;width: 472px;height: 32px;padding: 0 16px;margin-right: 16px;border: 1px solid rgba(212, 214, 217, 1);border-radius: 4px;">
          <span style="color: #BBBDBF;font-size: 14px"><a-icon type="file-text"/> 暂未上传文件</span>
          <a style="margin-left: 250px;border-left: 1px #BBBDBF solid;padding-left: 20px">立即上传</a>
        </div>
        <a-button type="primary" disabled>发 货</a-button>
        <a-checkbox :default-checked="false" disabled style="margin-left: 16px">
          允许覆盖
        </a-checkbox>
      </div>
      <div style="margin: 24px 0;font-size: 16px;color: #000000">本次上传订单</div>
      <div>
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="全部">
            <a-table :columns="columns" :data-source="data"></a-table>
          </a-tab-pane>
          <a-button slot="tabBarExtraContent" disabled>导出全部
          </a-button>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: '订单号',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '快递公司',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '运单号',
    dataIndex: 'address',
    key: 'address 1'
  },
  {
    title: '发货结果',
    dataIndex: 'address',
    key: 'address 2'
  },
  {
    title: '备注',
    dataIndex: 'address',
    key: 'address 3'
  }
]
const data = [

]
export default {
  name: 'BatchSend',
  data () {
    return {
      data,
      columns
    }
  }
}
</script>

<style scoped>

</style>
